<template>
  <div class=" UserInfo fadeInUp animated">
    <div class="globel">
      <div class="background" ref="background">
        <div class="icons">
          <img class="el-icon-view" src="" alt="" title="切换查看"/>
          <img class="el-icon-menu" src="" alt="" title="更换皮肤" @click="showMaskLayer = true">
        </div>
        <div class="headerImg">
          <div>
            <img v-if="form.avatarUrl" :src="form.avatarUrl" class="personAvatar" style="">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </div>
          <el-upload
              style="text-align: center; border-radius: 50%;position: absolute;"
              class="avatar-uploader"
              :action=" serverIp+'/files/upload'"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              >
            <div class="huantou" @mouseenter="inUser" @mouseleave="outUser" :style="'opacity: '+replace+';'">更换头像</div>
          </el-upload>
          <div class="userInfo">
            <div class="userInfo-top">
              <h3 class="name">{{ user.nickname }}</h3>
              <span class="sex"></span>
              <span class="grade"></span>
            </div>
            <p class="signature">ta很懒,什么也没有留下...</p>
          </div>
        </div>

      </div>
      <div class="tabs">

        <div  :class="checkTitleIdx == index ? 'checkTitle title' : 'title'" v-for="(item, index) in arr" :key="index"
          @click="toggleComponent(index)">{{ item.title }}</div>
      </div>
      <div class="content">

        <keep-alive>
          <component :is="currentTabComponent"></component>
        </keep-alive>
      </div>

    </div>
    <div class="toggleBg fadeInUp animated" v-show="showMaskLayer">
      <div class="maskLayer" @click="showMaskLayer = false">
        <h1>点击我关闭</h1>
      </div>
      <div class="bgs">
        <div class="bgs-container">
          <img :src="require(`./img/${index + 1}.jpg`)" class="bgs-item" v-for="(item, index) in 10" :key="index"
            @click="changeBgi(index)" :style="checkBg == index ? 'border-color:#fff' : ''" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Home from '@/components/Users/Home.vue'
import Article from '@/components/Users/Article/Article.vue'
import Special from '@/components/Users/Special.vue'
import Talk from '@/components/Users/Talk.vue'
import Bought from '@/components/Users/Bought/Bought.vue'
import Setting from '@/components/Users/Setting/Setting.vue'
import {serverIp} from "../../../../public/config";
import { log } from 'three'
export default {
  data() {
    return {
      checkBg: 0,
      showMaskLayer: false,
      user: localStorage.getItem("user")
        ? JSON.parse(localStorage.getItem("user"))
        : {},
      arr: [{ title: '主页', componet: 'Home' },
      { title: '文章', componet: 'Article' },
      { title: '专栏', componet: 'Special' },
      { title: '说说', componet: 'Talk' },
      { title: '已购', componet: 'Bought' },
      { title: '设置', componet: 'Setting' }],
      checkTitleIdx: 0,
      currentTabComponent:'Home',
      active:0,
      serverIp: serverIp,
      imageUrl: '', //图片地址
      form:localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")):{},
      replace:false
    };
  },
  methods: {
    toggleComponent(index){
      this.checkTitleIdx = index;
      this.currentTabComponent = this.arr[index].componet;
    },
    changeBgi(index) {
      this.checkBg = index;

      this.$refs.background.style.backgroundImage = `url(${require(`./img/${index + 1
        }.jpg`)})`;
      this.$message({
        message: "修改背景图成功",
        type: "success",
      });
    },
    getUser(from){  //存储新的user到浏览器
      //更新浏览器存储器
      localStorage.removeItem("user");
      localStorage.setItem("user",JSON.stringify(from))
    },
    save(){
      this.request.post("/user", this.form).then(res=>{
        if(res.code ==="200"){
          this.getUser(this.form);  //存储新的数据到浏览器
          this.openFullScreen2();
        }else {
          this.$message.error(res.msg);
        }
      })
    },
    //图片上传方法
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.form.avatarUrl = res.data;
      this.save(this.form);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    //头像加载框
    openFullScreen2() {
      const loading = this.$loading({
        lock: true,
        text: '加载中请稍等',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      });
      setTimeout(() => {
        // 触发父级更新user的方法
        this.$emit("refreshUser")
        this.$message.success("修改成功")
        loading.close();
      }, 1000);
    },
    inUser(){
      this.replace=1;
    },
    outUser(){
      this.replace=0;
    }
  },
  beforeCreate(){
    // this.$options.components.Home= require('@/components/Users/Home.vue').default
  },
  components:{
    Home,Article,Special,Talk,Bought,Setting
  }
};
</script>

<style scoped lang="less">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.personAvatar {
  width: 178px;
  height: 178px;
  display: block;
}
.inputWidth{
  width: 350px;
}

.UserInfo{
  height: 100vh;

}
.toggleBg {

  width: 100vw;
  height: 100vh;
  position: fixed;
  bottom: 0;
  z-index: 7;

  .maskLayer {
    width: 100vw;
    height: 58%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 5;
    // display: flex;
    // justify-content: center;
    // align-items: center;

    h1 {
      color: #fff;
      font-size: 30px;
      font-weight: 600;
      letter-spacing: 30px;
      position: absolute;
      top: 280px;
      left: 50%;
      transform: translate(-50%);
    }
  }

  .maskLayer:hover h1 {
    color: orange;
  }

  .maskLayer:hover {
    cursor: pointer;
  }

  .bgs {
    width: 100vw;
    height: 42%;
    z-index: 5;
    background-color: rgba(0, 0, 0);

    // position: fixed;
    // bottom: 0;
    &-container {
      width: 1300px;
      height: 100%;
      padding: 20px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: left;
      overflow: auto;

      .bgs-item {
        width: 280px;
        height: 95px;
        margin: 10px 0;
        margin-right: 40px;
        border: 3px solid #666;
        border-radius: 12px;
        cursor: pointer;
      }

      .bgs-item:nth-of-type(4n) {
        margin-right: 0;
      }
    }
  }
}

.footer {
  width: 100vw;
  height: 133px;
  background-color: #fff;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  ul{
    display: flex;
    color: #999;
    li{
      margin: 5px;
    }
  }
}

.globel {
  width: 1200px;
  margin: 0 auto;

  position: relative;
  top: 80px;
  z-index: 1;

  .content {
    width: 100%;
    height: 482px;
    margin-top: 15px;
    margin-bottom: 110px;
  }


  .headerImg {
    position: relative;
    top: 100px;
    left: 30px;
    display: flex;
    align-items: center;

    .userInfo {
      color: #fff;
      margin-left: 15px;

      .name {
        font-size: 16px;
        font-weight: 600;
      }

      .signature {
        font-size: 14px;
        margin-top: 15px;
      }
    }

    img {
      width: 80px;
      height: 80px;
      border: 1.5px solid #efefef;
      border-radius: 50%;
    }
  }

  .tabs {
    background-color: #fff;
    height: 60px;
    border-radius: 0 0 5px 5px;
    padding: 0 20px;
    display: flex;
    align-items: center;

    .title {
      width: 50px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      margin-right: 10px;
      cursor: pointer;
    }

    .checkTitle {
      border-bottom: 2px solid #000;
      font-weight: 600;
    }
  }

  .background {
    width: 100%;
    height: 212px;
    background-image: url("./img/1.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin-top: -1px;
    position: relative;

    .icons {
      width: 78px;
      height: 26px;
      border-radius: 18px;
      padding: 3px;
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 2;
      background-color: rgba(255, 255, 255, 0.42);
      display: flex;
      justify-content: space-around;
      align-items: center;

      .el-icon-menu,
      .el-icon-view {
        font-size: 20px;
        color: #000;
        cursor: pointer;
      }

      .el-icon-view:hover {
        color: #007bff;
      }

      .el-icon-menu:hover {
        color: #007bff;
      }
    }
  }
}
/*base code*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}
/*the animation definition*/
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none
  }
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp
}


/*base code*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}
/*the animation definition*/
@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
  }
}
@keyframes fadeOutDown {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
  }
}
.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown
}
.huantou{
  width: 80px;
  height: 80px;
  position: relative;
  opacity: 0;
  background: rgba(0,0,0,.6);
  border-radius: 50%;
  text-align: center;
  color: white;
  line-height: 80px;
}
</style>